<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../public/js/vue.js"></script>  <!-- 引入vuejs -->
</head>
<body>
  <!-- 
    1.记录注意事项:
    data:{}  
    data(){return}
    ①在项目开发中将data封装成一个函数，在使用组件时只是使用函数生成的数据副本，避免变量污染；
    
    2.要点：
    ①.Vue 是 声明式编程，原生或者Jquery 是命令式编程；
    声明式编程：将 div 挂载到实例之后使用变量即可改变渲染的内容；
    命令式编程: 操作demo时 需要一步一步命令改变demo中渲染的内容；
   -->
   <!-- 体验Vue的响应式 -->
    <div id="app">{{message}}</div>
    <script>
      // 1.创建vue实例
      const app = new Vue({
        el: "#app",  // 挂载id为app的div 
        data() {
          return {
            message:"你好啊，李银河！" // 修改vue实例中data的值 即可让界面中渲染的内容同步刷新；
          }
        }
      })
      // 通过定时修改data中的值，提现Vue的响应;
      let count = 1;
      setInterval(() => {
        app.message = "我爱孔小飘的第" + count + "天";
        count++;
      }, 1500);
    </script>
</body>
</html>